<script setup>
</script>
<template>
  <div id="app">
    <nav>
      <!-- 左侧：Logo -->
      <div class="nav-left">
        <h2>XXX</h2>
      </div>

      <!-- 中间：导航菜单 -->
      <div class="nav-center">
        <router-link to="/">首页</router-link>
        <router-link to="/resources">资源</router-link>
        <router-link to="/upload">上传</router-link>
        <router-link to="/manage">管理</router-link>
        <router-link to="/about">关于</router-link>
      </div>

      <!-- 右侧：用户信息 -->
      <div class="nav-right">
        <h2>用户</h2>
        <img v-if="avatar" :src="avatar" alt="头像" />
      </div>
    </nav>

    <router-view />
  </div>
</template>

<style scoped>
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height:48px;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.nav-left h2,
.nav-right h2 {
  font-size: 18px;
  margin: 0;
  color: #333;
}

.nav-center {
  display: flex;
  gap: 24px;
  margin-left: 720px; /* 让导航菜单往右移720px */
}

nav a {
  text-decoration: none;
  color: #333;
  margin: 0 15px;  /* 左右各15px间隔 */
  font-weight: 500;
}

nav a:hover {
  color: #42b983;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-right img {
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

#app {
  padding-top: 24px;
  /* 给导航栏留空间 */
}
</style>
